<template>
	<view class="logistics" v-if="logistics">
		<n-loading></n-loading>
		<!-- 快递 -->
		<view class="expressBox">
			<image :src="logistics.logo"></image>
			<view class="waresInfoRight">
				<view class="title">{{logistics.expName}}</view>
				<view class="ponits">官方电话 <text @tap="phoneCall(logistics.expPhone)">{{logistics.expPhone}}</text></view>
			</view>
		</view>
		<!-- 物流 -->
		<view class="logisticsBox">
			<u-time-line>
				<u-time-line-item nodeTop="2" v-for="(logs,index) of logistics.list" :key="index">
					<!-- 此处自定义了左边内容，用一个图标替代 -->
					<template v-slot:node>
						<view class="u-nodeS" style="background: #ccc;" v-if="index!=0"></view>
						<view class="u-node" style="background: #ccc;" v-if="logistics.issign==1 && index==0">
							<!-- 此处为uView的icon组件 -->
							<!-- <u-icon name="car" color="#fff" :size="24"></u-icon> -->
							<text class="complete">收</text>
						</view>
						<view class="u-node" style="background: #EB4B34;" v-if="logistics.issign==0 && index==0">
							<!-- 此处为uView的icon组件 -->
							<u-icon name="car" color="#fff" :size="24"></u-icon>
						</view>
					</template>
					<template v-slot:content>
						<view>
							<view class="u-order-title" v-if="logistics.issign==0 && index==0">运输中</view>
							<view class="u-order-desc">{{logs.status}}</view>
							<view class="u-order-time">{{logs.time}}</view>
						</view>
					</template>
				</u-time-line-item>
			</u-time-line>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				logistics:null,
			}
		},
		onLoad: function (option) {
			this.getLogistics(option.id)
		},
		methods: {
			getLogistics(id){
				this.apiget('/fun/order/express-track',{id:id}).then(res =>{
					if(res.data.status == 200 ) {
						this.logistics = res.data.data;
					}
				})
			},
			phoneCall(phone) {
				uni.makePhoneCall({
				    phoneNumber: phone 
				});
			}
		}
	}
</script>


<style lang="scss">
	.logistics{
		min-height: 100%;
		background-color: #F8F8FA;
	}
	.expressBox{
		padding: 8rpx 32rpx;
		margin-bottom: 16rpx;
		background-color: #ffffff;
		display: flex;
		align-items: center;
		
		image{
			margin-right: 32rpx;
			width: 112rpx;
			height: 112rpx;
			border-radius: 8rpx;
		}
		
		.waresInfoRight{
			flex: auto;
			
			.title{
				font-size: 36rpx;
				line-height: 52rpx;
				color: #333333;
			}
			
			.ponits{
				font-size: 24rpx;
				line-height: 40rpx;
				color: #666666;
				
				text{
					margin-left: 8rpx;
					color: #40A9FF;
				}
			}
		}
	}
	.logisticsBox{
		padding: 24rpx 60rpx;
		background-color: #fff;
		
		.u-nodeS{
			width: 16rpx;
			height: 16rpx;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #d0d0d0;
		}
		
		.u-node {
			width: 44rpx;
			height: 44rpx;
			border-radius: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #d0d0d0;
		}
		
		.complete{
			font-size: 24rpx;
			color: #fff;
		}
		
		.u-order-title {
			color: #333333;
			font-weight: bold;
			font-size: 32rpx;
		}
		
		.u-order-desc {
			color: rgb(150, 150, 150);
			font-size: 28rpx;
			margin-bottom: 6rpx;
		}
		
		.u-order-time {
			color: rgb(200, 200, 200);
			font-size: 26rpx;
		}
	}
</style>
